/*
 * @Author: 小胖沱 1643200914@qq.com
 * @Date: 2022-12-19 17:52:54
 * @LastEditors: 小胖沱 1643200914@qq.com
 * @LastEditTime: 2023-01-04 17:43:48
 * @FilePath: \jk_sort_front\src\pages\QueryReport\ProductionBroad\components\Attendance.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { Pie } from '@antv/g2plot'
import { useEffect, useLayoutEffect, useRef, useState } from 'react'

import styles from './reservoirInventory.module.less'
import { getRemFontSize } from './stockNumber'

export default (props) => {
  const { data } = props
  const containerRef = useRef<any>()

  const [chart, setChart] = useState<null | Pie>()
  const [cHeight, setCHeight] = useState(0)
  const [fontSize, setFontSize] = useState(16)

  useEffect(() => {
    window.addEventListener('resize', changeSize)
    changeSize()
  }, [])

  const changeSize = () => {
    const screenWidth = window.innerWidth
    if (screenWidth < 1280) {
      setFontSize(10)
    } else {
      setFontSize(16)
    }
  }

  useEffect(() => {
    const piePlot = new Pie('attendanceDom', {
      appendPadding: 20,
      data: [],
      autoFit: true,
      angleField: 'value',
      colorField: 'type',
      color: ['#44D7B6', '#F7B500', '#DD2A2A', '#0EC5DF'],
      radius: 1,
      innerRadius: 0.6,
      height: cHeight * 0.7,
      tooltip: false,
      // label: {
      //   type: 'inner',
      //   labelHeight: 28,
      //   content: '{value}, {percentage}',
      //   style: {
      //     fill: '#FFFFFF',
      //     fontSize: fontSize
      //   },
      //   formatter: ({ percent }) => `${(percent * 100).toFixed(0)}%`
      // },
      label: {
        type: 'inner',
        offset: '-50%',
        autoRotate: false,
        style: { textAlign: 'center' },
        formatter: ({ percent }) => `${(percent * 100).toFixed(0)}%`
      },
      interactions: [{ type: 'element-selected' }, { type: 'element-active' }],
      statistic: {
        title: false,
        content: {
          style: {
            whiteSpace: 'pre-wrap',
            overflow: 'hidden',
            textOverflow: 'ellipsis',
            color: '#fff'
          }
        }
      },
      legend: {
        layout: 'horizontal',
        position: 'top-right',
        itemName: {
          style: {
            fontSize: fontSize,
            fill: '#FFFFFF'
          }
        }
      }
    })

    piePlot.render()
    setChart(piePlot)
  }, [fontSize])

  useEffect(() => {
    if (chart && data) {
      const pieData = [
        { type: '大烫', value: data.ironNum ?? 0 },
        { type: '复查', value: data.reviewNum ?? 0 },
        { type: '包装', value: data.packNum ?? 0 },
        { type: '上架', value: data.putawayNum ?? 0 }
      ]

      chart.update({
        data: pieData,
        statistic: {
          title: false,
          content: {
            style: {
              fontSize: '1rem'
            },
            content: `${(data && data.totalNum) ?? 0}\n总人数`
          }
        }
      })
    }
  }, [chart, data])

  useLayoutEffect(() => {
    if (containerRef.current) {
      const containerHeight = containerRef.current.clientHeight
      setCHeight(containerHeight)
    }
  }, [])

  useEffect(() => {
    window.addEventListener('resize', resize)
    resize() // 初始化
    return () => {
      window.removeEventListener('resize', resize)
    }
  }, [chart])

  const resize = () => {
    if (!chart) return
    chart.update({
      label: {
        style: {
          fontSize: getRemFontSize() * 1.4
        }
      },
      legend: {
        itemName: {
          style: {
            fontSize: getRemFontSize() * 1
          }
        },
        marker: {
          style: {
            fontSize: getRemFontSize() * 1,
            r: getRemFontSize() * 0.4
          }
        }
      },
      statistic: {
        title: false,
        content: {
          style: {
            fontSize: '1rem'
          },
          content: `${(data && data.totalNum) ?? 0}\n总人数`
        }
      }
    })
  }

  return (
    <div className={styles.container} ref={containerRef}>
      <header className={styles.inventoryHeader}>出勤人数</header>
      <div
        id="attendanceDom"
        style={{ marginTop: '6%', height: '78%', width: '100%' }}
      />
    </div>
  )
}
